<template>
    <div class="live-item">
        <a :href="'/o/live/LiveDetail/' + live.id">

            <div class="i-pic">
                <img v-lazy="downloadUrl + live.liveCover" alt="" />
                <span class="livePartition">{{ live.livePartition }}</span>
            </div>

            <!-- 用户头像、用户名、分区 -->
            <div class="i-tags">
                <span class="userName">
                    <i class="el-icon-s-custom"></i>
                    <span>{{ live.nickName }}</span>
                </span>
                <span class="liveOnline">
                    <i class="el-icon-view"></i>
                    {{ tenThousand(live.liveOnline) }}
                </span>
            </div>

            <!-- 直播名、在线人数 -->
            <div class="i-title">
                <span class="liveTitle">{{ live.liveTitle }}</span>
            </div>
        </a>
    </div>
</template>
  
<script>
export default {
    name: "live-item",
    props: {
        live: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
        };
    },
    computed: {
        // 计算数量过万就转换
        tenThousand() {
            // 计算属性是一个属性不是一个方法, 使用函数返回
            return (count) => {
                if (count >= 100000000) {
                    return (count / 100000000).toFixed(1) + "亿";
                }
                return count >= 10000 ? (count / 10000).toFixed(1) + "万" : count;
            };
        },
    },

    methods: {
    },
};
</script>
  
<style scoped>
.live-item {
    box-sizing: border-box;
    width: 210px;
    height: 180px;
    border: 1px solid #e5e9ef;
    border-radius: 6px;
    overflow: hidden;
    font: 12px Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB,
        Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

.i-pic {
    position: relative;
    overflow: hidden;
    height: 120px;
}

.i-pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.i-pic span {
    position: absolute;
    bottom: 0;
    right: -1px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.5);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #fff;
}

.i-tags {
    display: flex;
    justify-content: space-between;
    margin: 10px 5px 0px 5px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
}

.userName {
    width: 140px;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
}

.liveOnline {
    font-size: 12px;
}

.i-title {
    margin: 5px;
    color: #414141;
    font-size: 14px;
    /* 字间距 */
    letter-spacing: 1px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
}

.liveTitle:hover {
    color: #52aae2;
}
</style>